<template>
  <div class="video-play-ptz-container">
    <div class="header" v-if="isShow">
      <!-- <el-icon @click="handleCanel" class="left-icon"><ArrowLeft /></el-icon> -->
      <span>视频预览</span>
      <div class="imgBox" @click="handleTouch">
        <img src="@/assets/images/xgjd/changePage.png" alt="" />
      </div>
    </div>
    <div class="headerLine" v-if="!isShow">
      <div
        class="imgBox"
        :class="{ active: activeView === 'one' }"
        @click="switchView('one')"
      >
        <img src="@/assets/images/xgjd/one.svg" alt="单画面视图" />
        <span>1画面</span>
      </div>
      <div
        class="imgBox"
        :class="{ active: activeView === 'four' }"
        @click="switchView('four')"
      >
        <img src="@/assets/images/xgjd/four.svg" alt="四画面视图" />
        <span>四画面</span>
      </div>
    </div>

    <div
      :style="{ height: videoBoxHeight }"
      class="video-box"
      :class="{ 'active-view-one': activeView === 'one' }"
    >
      <videoList
        :vid="currentIndexCode"
        :activeView="activeView"
        @screenRotation="handleScreenRotation"
        @itemClick="handleVideoItemClick"
      ></videoList>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import videoList from "@/components/video/videoList.vue";
import { useRoute, useRouter } from "vue-router";
import {
  handlecameracontrol,
  getwithdrawtransferinfo,
} from "@/api/videoplan.js";

const route = useRoute();
const router = useRouter();
let currentIndexCode = ref("");
let timer = null;
// 新增状态变量控制头部显示
const isShow = ref(true);
// 新增视图切换状态
const activeView = ref("one");
const videoBoxHeight = ref("25vh"); // 默认初始值（对应activeView: 'one'）
const videoBoxWidth = ref("100%"); // 默认初始值
let id = ref(""); // 用于存储当前视频流信息
const handleTouchStart = (cmd) => {
  handlecameracontrol({
    action: 0,
    cameraId: currentIndexCode.value,
    command: cmd,
  });
};
// 点击返回
const handleCanel = () => {
  console.log("点击返回", id.value);
  router.push({
    name: "webviewVideo",
    query: {
      indexCode: id.value,
    },
  });
};
const handleVideoItemClick = (stream) => {
  console.log("点击视频列表9----", stream);
  id.value = stream;
};

// 点击切换头部的显示
const handleTouch = () => {
  console.log("handleTouch", isShow.value);
  isShow.value = !isShow.value;
  console.log("点击后", isShow.value);
};

// 切换视图
const switchView = (view) => {
  activeView.value = view;
  isShow.value = !isShow.value;
  console.log("切换视图", activeView.value);
};
const isIpad = () => {
  const ua = navigator.userAgent.toLowerCase();
  return (
    /ipad/.test(ua) || (window.innerWidth >= 768 && window.innerWidth <= 1024)
  );
};
// 新增：定义不同设备的单视频高度
const getOneViewHeight = () => {
  if (isIpad()) {
    // iPad 设备：根据横竖屏动态调整（横屏更高，竖屏稍低）
    const isLandscape = window.innerWidth > window.innerHeight;
    return isLandscape ? "70vh" : "40vh"; // 横屏70%视口高度，竖屏60%
  } else {
    // 非iPad设备：保持原有25vh
    return "25vh";
  }
};
const handleScreenRotation = (isFullScreen) => {
  console.log("切换全屏", isFullScreen);
  console.log("isIpad", isIpad());
  console.log(
    "切换全屏前",
    activeView.value,
    videoBoxHeight.value,
    videoBoxWidth.value
  );
  if (isFullScreen) {
    videoBoxHeight.value = isIpad() ? "calc(100vh - 50px)" : "100vh";
    // videoBoxHeight.value = "100vh";
    videoBoxWidth.value = "100vw";
  } else {
    // 非全屏状态：根据视图类型和设备动态计算
    if (activeView.value === "one") {
      videoBoxHeight.value = getOneViewHeight(); // 复用单视频高度计算
    } else {
      videoBoxHeight.value = "100vh";
    }
    videoBoxWidth.value = "100%";
  }

  console.log("切换全屏后", videoBoxHeight.value, videoBoxWidth.value);
};
watch(
  activeView,
  (newVal) => {
    // // videoBoxHeight.value = newVal === "one" ? "217px" : "868px";
    // videoBoxHeight.value = newVal === "one" ? "25vh" : "100vh"; // 80vh 替代868px
    // console.log("activeView变化", newVal, videoBoxHeight.value);

    if (newVal === "one") {
      // 单视频模式：使用设备适配高度
      videoBoxHeight.value = getOneViewHeight();
    } else {
      // 四视频模式：保持原有逻辑
      videoBoxHeight.value = "100vh";
    }
  },
  { immediate: true } // 初始化时立即执行一次
);
const handleTouchEnd = (e) => {
  e.preventDefault();
  setTimeout(() => {
    handlecameracontrol({
      action: 1,
      cameraId: currentIndexCode.value,
      command: "LEFT",
    });
  }, 30);
};

onMounted(async () => {
  // 视频预览页面（白）---跳转过来
  if (route.query.type == "gongge") {
    currentIndexCode.value = route.query.transId;
    // 移除video-fullscreen样式
    document.documentElement.classList.remove("video-fullscreen");
    console.log("当前视频流---高度", videoBoxHeight.value);
    // isShow.value = false;
  } else {
    currentIndexCode.value = route.query.indexCode;
    localStorage.setItem("transId", currentIndexCode.value);
  }

  // 初始化需要调一下返回确定的方法，需要给默认的返回按钮携带的id赋值，保证初始化的时候有值
  const res = await getwithdrawtransferinfo({
    transId: currentIndexCode.value,
  });

  // 获取设备ID数组
  const deviceIds = res.data?.deviceIds || [];
  id.value = deviceIds[0] || "";
  console.log("初始化onMounted中的id0000000000", id.value);

  // 根据设备数量初始化视图类型：>=4个则用四画面，否则用单画面
  activeView.value = deviceIds.length >= 4 ? "four" : "one";

  console.log("初始化onMounted中的id0000000000", id.value);

  // 手动触发一次高度计算，确保DOM渲染时已初始化
  videoBoxHeight.value =
    activeView.value === "one" ? getOneViewHeight() : "80vh";
  console.log("onMounted", currentIndexCode.value, videoBoxHeight.value);
});
</script>

<style lang="scss" scoped>
::v-deep {
  // 基础iPad适配（覆盖768px到1366px宽度范围）
  @media only screen and (min-width: 768px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 768px) and (max-width: 1366px) and (min-device-pixel-ratio: 1.5) {
    // 单窗口模式下的视频高度调整
    .video-box {
      // iPad 下 .active-view-one 基础样式（非全屏）
      &.active-view-one {
        margin-top: 20% !important;
      }
    }
  }

  // 针对大尺寸iPad Pro横屏的额外适配
  @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (min-device-pixel-ratio: 1.5) {
    .video-box {
      // iPad 下 .active-view-one 基础样式（非全屏）
      &.active-view-one {
        margin-top: 20% !important;
      }
    }
  }

  // 针对iPad竖屏的特殊适配
  @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (min-device-pixel-ratio: 1.5) {
    .video-box {
      // iPad 下 .active-view-one 基础样式（非全屏）
      &.active-view-one {
        margin-top: 20% !important;
      }
    }
  }
}
.video-play-ptz-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2f2f2f;
  padding-top: 20px;
  .header {
    position: relative;
    width: 100%;
    height: 100rpx;
    background: #2f2f2f;
    line-height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 27rpx;
    color: #ffffff;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    .left-icon {
      position: absolute;
      left: 2%;
      cursor: pointer;
      :deep(.el-icon) {
        font-size: 20px;
      }
    }
    .imgBox {
      display: flex;
      position: absolute;
      right: 0;
      cursor: pointer;
      margin-right: 10px;
      img {
        cursor: pointer;
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .headerLine {
    width: 100%;
    height: 100rpx;
    background: #2f2f2f;
    line-height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 27rpx;
    color: #ffffff;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;

    .imgBox {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin: 0 20rpx;

      img {
        width: 50rpx;
        height: 50rpx;
        // 重置默认滤镜，保留过渡效果
        filter: none;
        transition: filter 0.3s ease;
        // 未选中状态：将任意颜色转换为#878787
        &:not(.active-img) {
          filter: brightness(0) saturate(100%) invert(53%) sepia(0%)
            saturate(0%) hue-rotate(205deg) brightness(91%) contrast(87%);
        }
      }

      &.active {
        img {
          // 选中状态：将任意颜色转换为#FFA214
          filter: brightness(0) saturate(100%) invert(73%) sepia(63%)
            saturate(507%) hue-rotate(338deg) brightness(101%) contrast(104%);
        }
      }
    }
  }

  .video-box {
    width: 100%;
    // height: 100%;
    // max-height: 434rpx;
    overflow-y: auto;
    width: v-bind(videoBoxWidth); // 绑定宽度
    height: v-bind(videoBoxHeight); // 绑定高度
    &.active-view-one {
      // 动态绑定的类名
      margin-top: 50%;
      margin-bottom: auto;
      width: 100%;
      overflow-y: auto;
      width: v-bind(videoBoxWidth); // 绑定宽度
      height: v-bind(videoBoxHeight); // 绑定高度
    }
  }

  .point-info {
    width: calc(100% - 56rpx);
    margin: 0 auto;
    height: 134rpx;
    background: #fff;
    padding: 15rpx 38rpx;

    .name-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        margin-top: 17rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 23rpx;
        color: #333333;
        line-height: 33rpx;
      }

      .lineStatus {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #39aa92;
        line-height: 33rpx;

        .circle {
          width: 17rpx;
          height: 17rpx;
          border-radius: 50%;
          background: #39aa92;
          margin-right: 10rpx;
        }
      }
    }

    .types {
      margin-top: 10rpx;
      display: flex;
      align-items: center;

      .tip {
        min-width: 81rpx;
        height: 38rpx;
        background: #d2f0ff;
        border-radius: 8rpx;
        text-align: center;
        padding: 0 17rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #45aff7;
        line-height: 38rpx;
      }
    }
  }

  .panel-box {
    margin-top: 26rpx;
    display: flex;
    align-items: top;
    padding: 0 28rpx;

    .ptz {
      padding: 38rpx 98rpx 36rpx 84rpx;
      width: 444rpx;
      height: 337rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
      margin-right: 19rpx;
    }

    .zoomptz {
      width: 229rpx;
      height: 337rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 90rpx;

      .zoombtn {
        width: 76rpx;
        height: 76rpx;
        background: #e4effd;
        border-radius: 15rpx;
        border: 2rpx solid #c3dcff;
        padding: 17rpx;

        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
    }
  }

  .tips {
    text-align: center;
    opacity: 0.5;
    margin-top: 100rpx;
  }
}
.video-fullscreen {
  // 确保根元素占满屏幕
  &:root,
  & body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; // 禁止页面滚动，避免横屏时出现滚动条
  }
  .video-play-ptz-container {
    padding-top: 0px !important;
  }
  .video-box {
    overflow-y: auto;
    width: v-bind(videoBoxWidth); // 绑定宽度
    height: v-bind(videoBoxHeight); // 绑定高度
    &.active-view-one {
      // // 动态绑定的类名
      margin-top: 0%;
      width: 100%;
      overflow-y: auto;
    }
  }
  // 确保播放器容器无额外限制
  .common-layout {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  // 隐藏非必要元素，避免占用空间
  .header,
  .speedBox,
  .center-info,
  .footer-info {
    display: none !important;
  }
}
</style>
